<script setup>
import { computed, ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
const defaultActive = ref('1-1')
const routeMap = {
  '/marketing/campaign/coupon/list': '1-1',
  '/marketing/campaign/collection/records': '1-2',
  '/marketing/campaign/point/statistics': '2-1',
  '/marketing/campaign/point/merchandise': '2-2',
  '/marketing/campaign/point/orders': '2-3',
  '/marketing/campaign/point/records': '2-4',
  '/marketing/campaign/point/configuration': '2-5',
  '/marketing/campaign/flash/sale': '3-1',
  '/marketing/campaign/flash/sale/configuration': '3-2',
  '/marketing/campaign/short/dated/sale': '4-1',
  '/marketing/campaign/newcomer/area': '5-1',
}
const route = useRoute()
watchEffect(() => {
  const matchedIndex = routeMap[route.path]
  if (matchedIndex) {
    defaultActive.value = matchedIndex
  }
})
</script>

<template>
  <el-container class="marketing-management">
    <el-aside width="180px">
      <el-menu :default-active="defaultActive" :router="true">
        <el-sub-menu index="1">
          <template #title>
            <span>优惠券</span>
          </template>
          <el-menu-item index="1-1" route="/marketing/campaign/coupon/list">优惠券列表</el-menu-item>
          <el-menu-item index="1-2" route="/marketing/campaign/collection/records">用户领取记录</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <span>积分管理</span>
          </template>
          <el-menu-item index="2-1" route="/marketing/campaign/point/statistics">积分统计</el-menu-item>
          <el-menu-item index="2-2" route="/marketing/campaign/point/merchandise">积分商品</el-menu-item>
          <el-menu-item index="2-3" route="/marketing/campaign/point/orders">积分订单</el-menu-item>
          <el-menu-item index="2-4" route="/marketing/campaign/point/records">积分记录</el-menu-item>
          <el-menu-item index="2-5" route="/marketing/campaign/point/configuration">积分配置</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <span>秒杀管理</span>
          </template>
          <el-menu-item index="3-1" route="/marketing/campaign/flash/sale">秒杀列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <span>临期特惠</span>
          </template>
          <el-menu-item index="4-1" route="/marketing/campaign/short/dated/sale">临期商品</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <span>新客专区</span>
          </template>
          <el-menu-item index="5-1" route="/marketing/campaign/newcomer/area">新客商品</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.el-menu {
  border: none;
  overflow: hidden;
}
.marketing-management {
  .el-aside {
    height: 100%;
    background-color: #ffffff;
  }

  .el-main {
    background-color: #f0f2f5;
    width: 100%;
  }
}
</style>
